<template>
  <div class="card-manager-list" :class="type">
    <wux-swipe-action-group>
      <wux-swipe-action autoClose useSlots class="swiper-item" v-for="item in data" :key="item._id">
        <div slot="left" v-if="item.cardClassify === 'custom'">
          <div class="conceal-button left">
            <div class="inner" @click="edit(item)"></div>
          </div>
        </div>
        <div slot="right" v-if="item.cardClassify === 'custom'">
          <div class="conceal-button right">
            <div class="inner" @click="del(item)"></div>
          </div>
        </div>
        <div class="manager-card" :class="{active: item.active}">
          <div
            class="card-icon"
            @click="jumpToDetail(item)"
            :style="'background-image:url('+(item.backgroundUrl ? 'http://cdn1.ielts.group/' + item.backgroundUrl : addCardbackgroundUrl)+')'"
          ></div>
          <div class="card-text">{{ item.title }}</div>
          <van-switch
            size="24px"
            class="card-switch"
            active-color="#FFA722"
            :checked="item.active"
            @click="clickSwitch(item)"
          />
        </div>
      </wux-swipe-action>
      <wux-swipe-action autoClose useSlots class="swiper-item" :key="index">
        <div class="manager-card" @click="addCard(type)">
          <div class="card-icon" :style="'background-image:url('+addCardbackgroundUrl+')'"></div>
          <div class="card-text">定制自己的{{typeMap[type]}}学习卡片</div>
          <div class="add-btn"></div>
        </div>
      </wux-swipe-action>
    </wux-swipe-action-group>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      typeMap: {
        listening: "听力",
        reading: "阅读",
        writing: "写作",
        speaking: "口语"
      },
      freezeSwicth: false
    };
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    type: {
      type: String
    }
  },
  methods: {
    addCard(type) {
      this.$emit("addCard", type);
    },
    jumpToDetail(item) {
      if (!item.detailUrl) return;
      wx.navigateTo({
        url: "/pages/detail/main?id=" + item.detailUrl
      });
    },
    clickSwitch(item) {
      if (this.freezeSwicth) return;
      this.freezeSwicth = true;
      this.$emit("switchCard", item);
      setTimeout(() => {
        this.freezeSwicth = false;
      }, 1000);
    },
    edit(item) {
      this.$emit("editCard", item);
    },
    del(item) {
      this.$emit("delCard", item);
    }
  },
  computed: {
    addCardbackgroundUrl() {
      const urlMap = {
        listening: "定制-听力@2x.png",
        reading: "定制-阅读@2x.png",
        writing: "定制-写作@2x.png",
        speaking: "定制-口语@2x.png"
      };
      const baseUrl = "http://cdn1.ielts.group/";
      return this.type && baseUrl + urlMap[this.type];
    }
  }
};
</script>

<style lang="less">
// 重写wux样式
.wux-swipe__content {
  background: transparent !important;
}
</style>

<style lang="less" scoped>
.conceal-button {
  width: 45px;
  height: 45px;
  margin-top: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  .inner {
    width: 30px;
    height: 30px;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }
  &.left {
    margin-left: 22px;
    margin-right: 8px;
    background: #3360ba;
    .inner {
      background-image: url("http://cdn.ielts.group/卡片编辑@3x.png");
    }
  }
  &.right {
    margin-right: 22px;
    margin-left: 8px;
    background: #ff7979;
    .inner {
      width: 22px;
      height: 22px;
      margin-right: 2px;
      background-image: url("http://cdn.ielts.group/垃圾桶@3x.png");
    }
  }
}

.manager-card {
  height: 63px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  background: #f7f8fa;
  margin: 5px 10px;
  box-sizing: border-box;
  .card-icon {
    flex: none;
    width: 45px;
    height: 45px;
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 50%;
    margin-left: 12px;
    margin-right: 9px;
  }
  .card-text {
    width: 100%;
    flex: 1 1 auto;
    font-size: 14px;
    color: #3d475c;
    font-weight: 600;
  }
  .card-switch {
    flex: none;
    margin-right: 14px;
  }
  .add-btn {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: url("../../../../static/images/index/add-button-big.png") center
      center no-repeat;
    background-size: 100%;
    margin-right: 14px;
  }
}
.card-manager-list.reading {
  .manager-card.active {
    background: #bc88f7;
  }
}
.card-manager-list.listening {
  .manager-card.active {
    background: #ffd733;
  }
}
.card-manager-list.writing {
  .manager-card.active {
    background: #678aff;
  }
}
.card-manager-list.speaking {
  .manager-card.active {
    background: #50e3c2;
  }
}
</style>